<template>
  <div>
    <ListTab v-if="!showMobilePage" show-header />
    <div :class="{'mobile-table mobile-min-height':showMobilePage}" class="min-fill-page handover">
      <div v-if="!showMobilePage" class="list-top">
        <FilterInput ref="filterInput" v-model="filterInput" :filter-list="filterList" show-search-btn @handelClick="queryClick" @queryEmpty="queryEmpty"/>
        <!-- v-if="hasRouteAuth('auth:handover:add')" -->
        <div class="btn-right">
          <create-button
            :icon="'el-icon-plus'"
            add-name="新增交接"
            create-link-name="addHandover" />
        </div>
      </div>
      <el-row v-loading="listLoading" style="min-height: 300px">
        <el-table
          v-if="list.items.length"
          :data="list.items"
          :height="setTableHeight"
          class="fb-table"
          element-loading-text="加载中..."
          header-cell-class-name="order-data-header-cell"
          empty-text="暂无数据"
          hightlight-current-row>
          <el-table-column align="left" label="交接编号" min-width="140">
            <template slot-scope="scope">
              <!-- <el-button type="text" @click="toDetail(scope.row.id)"><span style="font-size:14px;">{{ scope.row.sn }}</span></el-button> -->
              <span class="tranfer-num" @click="toDetail(scope.row.id)">{{ scope.row.sn }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="交接人">
            <template slot-scope="scope">
              <CheckUserInfo :user-id="scope.row.handoverId" :label="scope.row.handoverName" />
            </template>
          </el-table-column>
          <el-table-column align="left" label="被交接人">
            <template slot-scope="scope">
              <CheckUserInfo :user-id="scope.row.transfereeId" :label="scope.row.transfereeName" />
            </template>
          </el-table-column>
          <el-table-column align="left" label="状态">
            <template slot-scope="scope">
              <StatusText :color="['#fd8546', '#31cc9c'][scope.row.status]" :text="scope.row.status ? '已完成' : '交接中'" />
            </template>
          </el-table-column>
          <el-table-column align="left" label="创建人">
            <template slot-scope="scope">
              <CheckUserInfo :user-id="scope.row.createUserId" :label="scope.row.creator" />
            </template>
          </el-table-column>
          <el-table-column align="left" label="交接时间" min-width="160">
            <template slot-scope="scope">
              {{ scope.row.transferTime | format('YYYY/MM/DD HH:mm') }}
            </template>
          </el-table-column>
          <el-table-column align="left" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="toDetail(scope.row.id)"><span style="font-size:14px;">查看</span></el-button>
            </template>
          </el-table-column>
        </el-table>
        <empty-placeholder v-else-if="!list.isInit" style="margin-bottom: 24px" />
      </el-row>
      <el-row v-if="showMobilePage" type="flex" justify="left">
        <el-pagination
          v-show="list.total > 0"
          :current-page="list.page"
          :page-size="list.perPage"
          :total="list.total"
          :small="true"
          :page-sizes="[20, 50, 100, 250, 500]"
          :layout="pageLayout"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
      <fixed-pagination>
        <template v-if="showMobilePage">
          <FilterInput
            ref="filterInput"
            v-model="filterInput"
            :filter-list="filterList"
            show-mobile-icon
            show-search-btn
            @handelClick="queryClick"
            @queryEmpty="queryEmpty"/>
          <CreateBtn mobile-table style="width: 100%" text="新增交接" @click.native="toCreate"/>
        </template>
        <template v-else>
          <span style="flex:1;"/>
          <el-pagination
            v-show="list.total > 0"
            :current-page="list.page"
            :page-size="list.perPage"
            :total="list.total"
            :page-sizes="[20, 50, 100, 250, 500]"
            layout="total, prev, pager, next, sizes, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </template>
      </fixed-pagination>
    </div>
  </div>
</template>
<script>
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import CreateButton from '@/components/CreateButton';
import ListTab from '@/components/ListTab';
import Title from '@/components/Title';
import CreateBtn from '@/components/Common/baseComponent/createBtn';
import { getHandoverList } from '@/api/handover';
import { format } from '@/filters/date';
import { paramsRangeFormat } from '@/utils/paramsFormat';
import { hasRouteAuth } from '@/utils/permission';
import mobileTable from '@/mixins/mobileTable';
import { mapState } from 'vuex';

export default {
  components: { Title, CreateButton, EmptyPlaceholder, ListTab, CreateBtn },
  filters: { format },
  mixins: [mobileTable],
  data() {
    return {
      listLoading: true,
      list: {
        page: 1,
        perPage: 20,
        total: 0,
        items: [],
        isInit: true
      },
      params: {},
      page: 1,
      perPage: 20,
      filterInput: {},
      rangeKeyArr: [{
        attr: 'transferTime',
        start: 'transferTimeStart',
        end: 'transferTimeEnd',
        type: 'time',
        addTime: true
      }]
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    setTableHeight() {
      return this.showMobilePage ? 'calc(100vh - 148px)' : 'calc(100vh - 188px)';
    },
    filterList() {
      return [
        { keyword: 'sn', name: '交接编号', type: 'input', labelWidth: '70px' },
        { keyword: 'handoverName', name: '交接人', type: 'input', labelWidth: '70px' },
        { keyword: 'transfereeName', name: '被交接人', type: 'input', labelWidth: '70px' },
        { keyword: 'creator', name: '创建人', type: 'input', labelWidth: '70px' },
        { keyword: 'status', name: '状态', type: 'select',
          options: [{ value: 0, label: '交接中' }, { value: 1, label: '已完成' }] },
        { keyword: 'transferTime', name: '交接时间', timeType: 'daterange', type: 'rangeDate', labelWidth: '70px', startPlaceholder: '开始时间', endPlaceholder: '结束时间' }
      ];
    }
  },
  created() {
    this.fetchData(true);
  },
  beforeRouteEnter(to, from, next) {
    // to.meta.isChange = from.name === 'handoverDetail' ? false : true;
    if (from.name === 'handoverDetail') {
      to.meta.isChange = true;
    } else {
      to.meta.isChange = false;
    }
    next();
  },
  activated() {
    if (!this.$route.meta.isChange) {
      this.fetchData(true);
    } else {
      if (this.list && this.list.items && this.list.items.length === 0) {
        this.fetchData(true);
      } else {
        this.fetchData();
      }
    }
  },
  methods: {
    hasRouteAuth,
    queryEmpty() {
      this.filterInput = {};
      this.queryClick();
    },
    queryClick() {
      this.fetchData(true);
    },
    getParams() {
      const params = JSON.parse(JSON.stringify(this.filterInput));
      paramsRangeFormat(this.rangeKeyArr, params);
      return params;
    },
    fetchData(reset = false) {
      if (reset) this.page = 1;
      const params = this.getParams();
      this.listLoading = true;
      getHandoverList(this.page, this.perPage, params).then(({ data }) => {
        this.list = data;
        this.listLoading = false;
        this.list.isInit = false;
      }).catch(e => {
        console.error(e);
        this.listLoading = false;
      });
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.fetchData();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.fetchData();
    },
    toCreate() {
      this.$router.push({ name: 'addHandover' });
    },
    toDetail(id) {
      this.$router.push({
        name: 'handoverDetail',
        params: { id: id }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.handover {
  margin: 16px;
  background-color: #fff;
  padding: 20px 24px 0;
}
.list-top {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  .list-title {
    flex:1;
  }
  .btn-right{
    display: flex;
    .btn {
      margin-left: 10px;
    }
  }
}
.tranfer-num{
  color: #406EFF;
  font-size: 14px;
  cursor: pointer;
}
.mobile-table {
  & ::v-deep {
    td {
      height: 40px !important;
    }
  }
}
</style>
